<template>
  <div class="student">
    <V-Header></V-Header>
    <el-row class="headline">
      <el-col :span="6">
        <router-link :to="{name:'Student'}">
          <el-button class="headlinebtn" icon="el-icon-tickets">
            <el-col tag="span" style="line-height: 0.14rem;">学生自评</el-col>
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link :to="{name:'Evaluate'}">
          <el-button class="headlinebtn active" icon="el-icon-user">
            <el-col tag="span" style="line-height: 0.14rem;">学生互评</el-col>
          </el-button>
        </router-link>
      </el-col>
      <el-col :span="6">
        <router-link :to="{name:'Transcript'}">
          <el-button class="headlinebtn" icon="el-icon-edit-outline">
            <el-col tag="span" style="line-height: 0.14rem;">学生成绩</el-col>
          </el-button>
        </router-link>
      </el-col>
    </el-row>
    <div class="maincont">
      <!-- 个人信息 -->
      <el-row>
        <el-col :sm="6" :offset="1" :xs="{span:22,offset:0}" style="margin-bottom:0.2rem">
          <div class="iFont1_1">个人信息</div>
          <div class="iFont1">
            姓 名：
            <span>{{list.full_name}}</span>
          </div>
          <div class="iFont1">
            学 校：
            <span>{{list.school_title}}</span>
          </div>
          <div class="iFont1">
            年 级：
            <span>{{list.grade_year_title}}</span>
          </div>
          <div class="iFont1">
            班 级：
            <span>{{list.grade_title}}</span>
          </div>
        </el-col>
        <el-col :sm="6" :offset="1" :xs="{span:22,offset:0}"  class="choses" style="margin-bottom:0.2rem">
          <div class="iFont1_1">活动日期</div>
          <div style="margin-top:0.2rem"></div>
          <el-select
            style="margin-left: 0.3rem; border:1px solid rgba(166, 173, 215, 1);border-radius: 0.2rem;"
            v-model="times" 
            placeholder="请选择" 
            @change="changetime()"
          >
            <el-option 
              v-for="(item,index) in list.activity_time_concise"
                :key="index"
                :label="item"
                :value="item"
            ></el-option>
          </el-select>
          <div class="iFont1">活动主题：<span>{{themeName||'暂无'}}</span></div>
          <div class="iFont1">小组名称：<span>{{teamName||'暂无'}}</span></div>
        </el-col>
        <!-- <el-col :sm="6" :offset="1" class="choses" :xs="{span:22,offset:0}"  style="margin-bottom:0.2rem">
          <div class="iFont1_1">活动主题</div>
          <div style="margin-top:0.2rem"></div>
          <el-select
            style="margin-left: 0.3rem; border:0.01rem solid rgba(166, 173, 215, 1);border-radius: 0.2rem;"
            v-model="activeZT" 
            placeholder="请选择" 
            @change="changezuti(activeZT)"
          >
            <el-option 
              v-for="(item,index) in list.research_list"
                :key="index"
                :label="item"
                :value="item"
            ></el-option>
          </el-select> -->
          <!-- <div class="iFont1">小组名称：<span>{{data.team.team_alias_title}}</span></div> -->
        
      </el-row>
      <!-- 学校信息 -->
      <!-- PC -->
      <!-- <el-row class="activityinfo hidden-xs-only">
        <el-col :offset="2" :span="10" :xs="{span: 12, offset: 0}">
          <li>
            <span>活动日期：</span>
            <el-select v-model="times" placeholder="请选择" @change="changetime(times)">
              <el-option
                v-for="(item,index) in list.activity_time_concise"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </li>
        </el-col>
        <el-col :span="10" :xs="{span: 12, offset: 0}">
          <li>
            <span>活动:</span>
            <el-select v-model="activeid" placeholder="请选择" @change="changeactiv(activeid)">
              <el-option
                v-for="(item,index) in list.activity_concise"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </li>
        </el-col>
      </el-row>
      <el-row class="activityinfo hidden-xs-only">
        <el-col :offset="2" :span="10" :xs="{span: 12, offset: 0}">
          <li>班级：{{list.grade_title}}</li>
        </el-col>
        <el-col :span="10" :xs="{span: 12, offset: 0}">
          <li v-if="data.team">小组名称：{{data.team.team_alias_title}}</li>
        </el-col>
      </el-row> -->
      <!-- wap -->
      <!-- <el-row class="activityinfo hidden-sm-and-up">
        <li>
          <span>活动日期：</span>
          <el-select v-model="times" placeholder="请选择" @change="changetime(times)">
            <el-option
              v-for="(item,index) in list.activity_time_concise"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </li>
        <li>
          <span>活动:</span>
          <el-select v-model="activeid" placeholder="请选择" @change="changeactiv(activeid)">
            <el-option
              v-for="(item,index) in list.activity_concise"
              :key="index"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </li>
        <li>班级：{{list.grade_title}}</li>
        <li v-if="data.team">小组名称：{{data.team.team_alias_title}}</li>
      </el-row> -->
      <!-- 小组 -->
      <el-row class="groupinfo" style="margin-top:0.3rem">
        <el-col :sm="{span: 22, offset: 1}">
          <p
            class="referral"
           style="color:#999999; font-size:0.20rem; line-height:0.36rem; margin-top:0; margin-bottom:0.2rem">说明：填写当天活动小组内认识到的其他成员姓名和分数。表现优秀为“100-90”分；表现良好为“90-80”分；表现一般为“80-70”分；表现较差为“70-60”分</p>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="tableHeaderColor"
          >
            <el-table-column prop="full_name" align="center" label="姓名" min-width="25%"></el-table-column>
            <el-table-column prop="xzname" align="center" label="小组名称" min-width="25%"></el-table-column>
            <el-table-column prop="score" align="center" label="得分" min-width="40%">
              <template slot-scope="scope">
                <el-input placeholder="请给小伙伴打分" @blur="checkScore(scope.row.score)" v-model="scope.row.score" style="width:100%; border:none; outline:none; background:#fff;border:1px solid rgba(166, 173, 215, 1);border-radius: 0.1rem;" type="textarea"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="reviews" align="center" label="评语" min-width="40%">
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入评语"
                  style="width:100%;  font-size:0.16rem;border:1px solid rgba(166, 173, 215, 1);border-radius: 0.1rem;"
                  v-model="scope.row.reviews"
                  type="textarea"
                ></el-input>
                <!-- <i class="el-icon-circle-plus" style="font-size:0.4rem; margin-top:0.2rem" @click="showdailog(0,scope.$index)"></i> -->
                
              </template>
            </el-table-column>
          </el-table>
          
        </el-col>
      </el-row>
      <!-- 留言 -->
      
      <el-row>
        <el-col :sm="{span: 22, offset: 1}" >
          <div class="iFont1_1" style="margin-top:0.3rem">对当天主题活动的建议</div>
        </el-col>
      </el-row>
      <el-row class="groupinfo" style="margin-top:0.2rem">
        <el-col :sm="{span: 22, offset: 1}" class="sub">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4}"
            placeholder="请输入对当天活动的建议"
            v-model="content"
           style="border: 1px solid #D9D9D9;border-radius: 0.1rem; font-size:0.22rem"></el-input>
          <div style="text-align: right;">
           <!-- <i class="el-icon-circle-plus" style="font-size:0.4rem; margin-top:0.2rem" @click="showdailog(1,0)"></i> -->
          </div>
          <!-- 提交数据 -->
          <el-button type="primary" class="x-middle tijiao" @click="onsubie">提交</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 输入弹出窗 -->
    <el-dialog style="border-radius:0.2rem"
      title="请输入姓名"
      :visible.sync="dialogVisible"
      width="3.8rem"
      center>
      <el-input v-model="inputss" placeholder="请输入"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button class="el-buttons btn_bg1" @click="closedailog">取 消</el-button>
        <el-button class="el-buttons btn_bg2" type="primary" @click="subdailog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VHeader from "@/components/Header";
export default {
  name: "teacher",
  components: {
    VHeader
  },
  data() {
    return {
      dialogVisible: false,//dailog
      pinx:0,//
      cinx:0,
      inputss:'',
      list: "",
      data: "",
      times: "", //时间
      activeid: "", //活动id
      activeZT:'',//活动主题
      tableData: [
        // {
        //   full_name: "", //真实姓名
        //   evaluated_sid: "", //被评价的用户id（sid）
        //   reviews: "", //评语
        //   score: "" //打分
        // }
      ],
      content: "",
      themeName:'',
      teamName:''
    };
  },
  watch:{
    times(){
      this.getztorteam();
    }
  },
  methods: {
    //校验分值
    checkScore(score){
      let num1 = 59;
      let num2 = 101;
      if(score==null||''==score||'null'==score){
        return;
      }
      let reg=/^1?[1-9]?\d([.]\d)?$/;
      if('100'!=score){
        if(!reg.test(score)){
          this.$message({
            offset: "400",
            message: "请输入60-100的分值",
            showClose: true
          });
          return;
        }
      }
      
      if(num1<parseInt(score)&&parseInt(score)<num2){
        return;
      }else{
        this.$message({
          offset: "400",
          message: "请输入60-100的分值",
          showClose: true
        });
      }
      
    },
    //弹窗
    showdailog(pinx,cinx){
      
      this.inputss = '';
      this.dialogVisible = true;
      this.pinx = pinx;
      this.cinx = cinx;

    },
    closedailog(){
      this.dialogVisible = false;
    },
    subdailog(){
      let pinx = this.pinx;
      let cinx = this.cinx;
      console.log(pinx+'---'+cinx);
      if('0' == pinx){
        if('' == this.tableData[cinx].reviews){
          this.tableData[cinx].reviews =this.inputss;
        }else{
          this.tableData[cinx].reviews =this.tableData[cinx].reviews+";"+this.inputss;
        }
      }
      if('1' == pinx){
        if('' == this.content){
          this.content = this.inputss;
        }else{
          this.content = this.content+";"+this.inputss;
        }
      }
      this.closedailog();
    },
    getList() {
      this.$api.get("/student", {}).then(res => {
        if (res.data.code == "1") {
          this.list = res.data.data;
          this.$store.commit("setWapLoading", {
            username: res.data.data.full_name + "学生"
          });
          if (res.data.data.activity_concise) {
            this.times = 
            res.data.data.activity_concise.length != 0
              ? res.data.data.activity_time_concise[0]
              : "";
              this.activeZT = res.data.data.research_list.length != 0
              ? res.data.data.research_list[0]
              : "";
            this.activeid = res.data.data.activity_concise.length!=0?res.data.data.activity_concise[0].id:'';
            this.getData();
          }
        }
      });
    },
    // 新增获取活动主题和小组
    getztorteam(){
      this.$api.get("/student/team", {
        activity_time:this.times,
      }).then((res) => {
        if (res.data.code == "1") {
          this.themeName = res.data.data.research_title
          this.teamName = res.data.data.alias_title
          // this.activeid = res.data.data.id;
        }
      });
    },
    getData() {
      this.$api
        .get("/student/mutual", {
          time: this.times,
          // aid: this.activeid,
          // research_title:this.activeZT
        })
        .then(res => {
          if (res.data.code == 1) {
            console.log(res.data.data ==null);
            if (res.data.data != "" &&res.data.data != "null"&res.data.data != null) {
              this.data = res.data.data;
              this.content = res.data.data.content;
              var arr = [];
              res.data.data.member.forEach((item, index) => {
                let json = {};
                json.full_name = item.full_name;
                json.evaluated_sid = item.id;
                json.reviews = item.reviews;
                json.score = item.score;
                json.xzname = res.data.data.team.team_alias_title;
                arr.push(json);
              });
              this.tableData = arr;
            } else {
              this.tableData = [];
            }
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    },
    onsubie() {
      var num1 = 59;
      var num2 = 101;
      var tb = this.tableData;
      var istrue = true;
      for(var i=0;i < tb.length; i++){
        if(tb[i].score==null||''==tb[i].score||'null'==tb[i].score){
          istrue = false;
        }else{
          if(num1<parseInt(tb[i].score)&&parseInt(tb[i].score)<num2){
            // return;
          }else{
            istrue = false;
          }
        }
        
      }
      if(!istrue){
        this.$message({
          offset: "400",
          message: "请输入60-100的分值",
          showClose: true
        });
        return;
      }
      this.$confirm("提交后不可修改，确定提交吗？", "", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        center: true
      })
        .then(() => {
           
          this.setdata();
        })
        .catch(() => {
          // this.$router.go(-1)
        });
    },
    setdata() {
      let team = {};
     
      this.tableData.forEach((item, index) => {
        
        team["source" + "[" + index + "]" + "[evaluated_sid]"] =item.evaluated_sid;
        team["source" + "[" + index + "]" + "[reviews]"] = item.reviews;
        team["source" + "[" + index + "]" + "[score]"] = item.score;
      });
      team.aid = this.activeid;
      team.time = this.times;
      team.content = this.content;
      // return;
      this.$api.post("/student/mutual", team).then(res => {
        if (res.data.code == 1) {
          this.times = "";
          this.activeid = "";
          this.getList();
          this.$confirm("已提交成功，请在24小时候后登陆系统查看成绩，现在退出测评系统？", "", {
            confirmButtonText: "是",
            cancelButtonText: "否",
            center: true
          })
            .then(() => {
              this.outlogin();
            })
            .catch(() => {
            });
        } else {
          
          this.$message({
            offset: "400",
            message: res.data.message,
            showClose: true
          });
        }
      });
    },
    outlogin() {
      if (localStorage.getItem("FL_login") == 1) {
        this.$router.push({ name: "Index" });
      } else {
        this.$router.push({ name: "StudentLogin" });
      }
      localStorage.setItem("FL_TOKEN", " ");
    },
    changetime(val) {
      this.getData();
    },
    changeactiv(val) {
      this.getData();
    },
    changezuti(val){
      console.log(val);
      this.getData();
    },
    // 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#FAFAFA;color:#273274";
      }
    }
  },
  created() {
    this.getList();
    console.log(this.$route.params.time)
  }
};
</script>

<style lang="less">

.student {
  // overflow: hidden;
  .el-table {
    .cell,
    input {
      font-size: 0.22rem;
      text-align: center;
    }
  }
  .headline {
    width:100%;
    height: 1.4rem;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.11);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .headlinebtn {
      width: 100%;
      max-width: 2.81rem;
      height: 0.64rem;
      border-radius: 32px;
      font-size: 0.26rem;
      color: #333333;
      border: none;
      background: rgba(246, 246, 246, 1);
      span {
        display: inline-block;
      }
    }
    .active {
      background: rgba(34, 49, 115, 1) !important;
      color: rgba(255, 255, 255, 1) !important;
    }
  }
  .maincont {
    box-sizing: border-box;
    padding: 0.51rem 10px;
    margin-bottom: 29px;
    .activityinfo {
      li {
        text-align: left;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-bottom: 0.35rem;
        font-size: 0.2rem;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        border-left: 4px solid #263274;
        padding-left: 15px;
        span {
          display: inline-block;
          line-height: 0.35rem;
          height: 0.35rem;
        }
        input {
          height: 0.35rem;
          line-height: 0.35rem;
          width: 3rem;
          max-width: 144px;
          background: rgba(246, 246, 246, 0.7);
          border: none;
          font-size: 0.22rem;
          color: #333333;
          text-align: center;
          &::-webkit-input-placeholder {
            color: #333333;
          }
        }
        .el-input__icon {
          line-height: 0.32rem;
          font-size: 0.14rem;
        }
      }
    }
    form {
      overflow: hidden;
    }
    .selet-form-inline {
      margin-bottom: 51px;
      label {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
      }
      input {
        max-width: 141px;
        height: 42px;
        line-height: 42px;
        font-size: 18px;
        margin-right: 52px;
        border-color: rgba(153, 153, 153, 1);
      }
      .determine {
        float: right;
        button {
          width: 97px;
          height: 44px;
          background: rgba(66, 177, 226, 1);
          border-radius: 22px;
          box-shadow: 0px 0px 20px rgba(66, 177, 226, 0.4);
        }
      }
    }
    .groupinfo {
      .el-table {
        border-radius: 0.1rem;
        .el-select {
          width: 100%;
          max-width: 141px;
          input {
            // height: 42px;
            line-height: 42px;
            // background: rgba(246, 246, 246, 0.7);
            border: none;
            color: #333333;
            text-align: center;
            border-color: #ffffff;
            &::-webkit-input-placeholder {
              color: #333333;
            }
          }
        }
      }
      .referral {
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-top: 21px;
      }
    }
    .merit,
    .defect,
    .fayan {
      margin-top: 47px;
      .el-table {
        border-radius: 10px;
        input {
          text-align: center;
          max-width: 465px;
        }
      }
      .fubiaoti {
        color: #333333;
        th {
          background: #fff;
        }
      }
    }
    .fayan {
      input {
        text-align: center;
        max-width: 1619px !important;
      }
    }
    .el-textarea {
      // margin-top: 40px;
      display: block;
    }
    textarea {
      border-radius: 10px;
      min-height: 1rem !important;
      // padding: 20px 30px;
      border: none;
      outline: none;
      resize: none;
    }
    .tijiao {
      width: 1.74rem;
      height: 0.6rem;
      background:rgba(38,49,115,1) !important;
      // box-shadow: 0 0 10px rgba(66, 177, 226, 1);
      border-radius: 30px;
      margin-top: 0.56rem;
      font-size: 0.22rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
      margin-bottom: 36px;
    }
  }
}

.iFont1_1 {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(38, 49, 115, 1);
  line-height: 0.3rem;
}
.iFont1_1:before {
  content: "";
  height: 10px;
  width: 6px;
  border-left: 0.07rem solid rgba(38, 49, 115, 1);
  background: rgba(38, 49, 115, 1);
  margin-right: 0.1rem;
}
.iFont1 {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-top: 0.2rem;
  margin-left: 0.3rem;
  span {
    color: #666666;
  }
}
.maincont {
  input {
    height: 0.5rem;
    line-height: 0.35rem;
    // width: 2rem;
    // max-width: 144px;
    background: #ffffff;
    border: none;
    font-size: 0.20rem;
    color: rgba(166, 173, 215, 1);
    text-align: center;
    // border: 0.01rem solid #ffffff;
    border-radius: 0.2rem;
    outline: none;
    &::-webkit-input-placeholder {
      color: #333333;
    }
  }
}

.choses{
  input{
    // background: rgba(246, 246, 246, 0.7);
    font-size: 0.20rem;
    color: rgba(166, 173, 215, 1);
    text-align: center;
    // border: 0.01rem solid rgba(166, 173, 215, 1);
  }
}
  .sub{
    input{
      // background: rgba(246, 246, 246, 0.7);
      font-size: 0.20rem;
      color: rgba(166, 173, 215, 1);
      text-align: center;
      // border: 0.01rem solid rgba(166, 173, 215, 1);
    }
  }
.groupinfo{
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: rgba(166, 173, 215, 1);
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: rgba(166, 173, 215, 1);
  }
}



.el-message-box .el-message-box__btns .el-button--primary{
  background: rgba(38, 49, 115, 1) !important;
}
.el-dialog__title{
  font-size: 0.26rem;
}
.el-buttons{
  background: #263173 !important;
  border-radius: 0.3rem;
  border: 0.01rem solid #263173;
  color: #fff;
  
}
.btn_bg1{
  color: #cccccc;
  background: #fff !important;
  border-color: #cccccc;
}
.el-dialog{
  border-radius: 0.1rem;
}
.el-message-box .el-message-box__btns{
  display: flex
}
.el-message-box__btns{
  justify-content: space-around;
}
</style>
